<!--
 * @Description: 应用系统首页
 * @Author: Huang Junjie
 * @Date: 2021-04-14 10:09:17
 * @LastEditTime: 2021-10-21 03:35:34
 * @LastEditors: Liu Zhiwang
-->
<template>
  <!-- <div :style="`zoom: ${$store.state.jjxt.pageZoom};`"> -->
  <div>
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/ywzt/ywzt-index-background.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/ywzt" />
    <!-- 顶部导航栏 -->

    <el-collapse v-model="collapseActiveNames" class="collapse-style">
      <el-scrollbar>
        <div
          v-for="(item, index) in dataList"
          :key="`a${index}`"
        >
          <el-collapse-item
            v-show="item.appList.length !== 0"
            :name="index"
          >
            <template slot="title">
              <div class="title">
                <div class="point-icon" />
                <span>{{ item.platformName }}</span>
              </div>
            </template>
            <div class="collapse-content">
              <div
                v-for="(innerItem, innerIndex) in item.appList"
                :key="`b${innerIndex}`"
                class="app-card"
                @click="gotoSubSystem(innerItem)"
              >
                <img
                  class="app-icon"
                  :src="require('@/assets/images/jjxt/ywzt/ywzt-app-icon.png')"
                >
                <span class="app-name">{{ innerItem.appName }}</span>
              </div>
            </div>
          </el-collapse-item>
        </div>
      </el-scrollbar>
    </el-collapse>
  </div>
</template>

<script>
import { getDataList, getJCWLoginInfo } from '@/api/jjxt/ywzt';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';
import { mapGetters } from 'vuex';

export default {
  name: 'Ywzt',
  components: {
    TopNavigationBar
  },
  data() {
    return {
      // 默认打开的折叠面板
      collapseActiveNames: [],

      // 应用系统列表数据
      dataList: []
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getDataList(); // 查询应用系统列表
  },
  methods: {
    // 查询应用系统列表
    getDataList() {
      getDataList().then(res => {
        res.data.forEach((val, key) => {
          this.collapseActiveNames.push(key);
        });
        this.dataList = res.data;
      });
    },
    gotoSubSystem(item) {
      localStorage.setItem('appId', '');
      localStorage.setItem('clientId', item.clientId);
      localStorage.setItem('appName', item.appName);
      localStorage.setItem('platformName', '');
      if (item.appName.indexOf('接触网作业') !== -1) {
        this.confirmBox(`确定跳转接触网作业系统吗?`).then(() => {
          // 接触网作业系统-获取用户信息加密串
          getJCWLoginInfo({ unitCodeParams: this.userInfo.abbreviation }).then((response) => {
            window.open(response.data);
          });
          window.open(item.appUrlAttrList[0].redirectUri);
        }).catch(() => {});
      } else {
        window.location.assign(item.appUrlAttrList[0].redirectUri);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-collapse {
  border: none;
}

::v-deep .el-collapse-item {
  margin-bottom: 13px;
}

::v-deep .el-collapse-item__header {
  background-color: rgba($color: #4c91eb, $alpha: 0.06);
  border-bottom: none;
  height: auto;
  line-height: 19px;
}

::v-deep .el-collapse-item__arrow {
  color: white;
  font-size: 30px;
}

::v-deep .el-collapse-item__wrap {
  background-color: rgba($color: #4c91eb, $alpha: 0.06);
  border-bottom: none;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 18px;
}

.el-scrollbar {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 88px;
  bottom: 0;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  ::v-deep .el-scrollbar__view {
    overflow-x: hidden;
  }
}

#background {
  background-color: #071742;
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.collapse-style {
  padding: 20px;
  .title {
    font-size: 20px;
    padding: 24px 0 20px 0;
    align-items: center;
    display: flex;
    color: white;
    .point-icon {
      background-color: white;
      height: 10px;
      width: 10px;
      margin: 0 12px 0 24px;
    }
  }
  .collapse-content {
    padding: 0 24px 0 24px;
    display: flex;
    flex-wrap: wrap;
    .app-card {
      position: relative;
      width: 158px;
      height: 110px;
      margin: 0 27px 12px 0;
      background-color: rgba($color: #175ebb, $alpha: 0.6);
      color: white;
      .app-icon {
        position: absolute;
        top: 21px;
        left: 62px;
        right: 61px;
        bottom: 49px;
        width: 35px;
        height: 40px;
      }
      .app-name {
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        bottom: 20px;
        text-align: center;
        font-size: 16px;
        line-height: 18px;
      }
    }
    // .app-card:nth-child(10n+0){
    //   position: relative;
    //   width: 158px;
    //   height: 110px;
    //   margin: 0 0 12px 0;
    //   background-color: rgba($color: #175ebb, $alpha: 0.6);
    //   color: white;
    //   .app-icon {
    //     position: absolute;
    //     top: 21px;
    //     left: 62px;
    //     right: 61px;
    //     bottom: 49px;
    //     width: 35px;
    //     height: 40px;
    //   }
    //   .app-name {
    //     position: absolute;
    //     top: 74px;
    //     left: 0;
    //     right: 0;
    //     bottom: 20px;
    //     text-align: center;
    //     font-size: 16px;
    //   }
    // }
    .app-card:hover {
      background-color: #2d6dd4;
      cursor: pointer;
    }
  }
}
</style>
